<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>onchange</title>
		<style>
		.wrapper {
			width: 540px;
			height: 310px;
			background-color: #a1ca6c;
			padding-top: 37px;
		}
		.out {
			width: 380px;
			height: 100px;
			margin: 0 auto;
			background-color: #84a659;
		}
		p {
			width: 270px;
			padding: 15px;
			color: white;
			margin: 0 auto;
		}
		.in {
			width: 300px;
			height: 32px;
			margin: 0 auto;
			position: relative;
		}
		select {
			width: 100%;
			height: 100%;
			border-radius: 3px;
			background-color: #546a39;
			padding-left: 15px;
			color: white;
			-webkit-appearance: none; 
		}
		.thr {
			width: 9px;
			position: absolute;
			right: 10px;
			top: 12px;
		}
		.thr > div {
			height: 2px;
			margin-bottom: 1px;
			background-color: white;
		}
		option {
			background-color: white;
			color: #68727b;
		}

	</style>

</head>
<body>
	<div class = "wrapper">
		<div class = "out">
			<div class="in">
				<select name="web" id="sel">
					<option value="html">HTML</option>
					<option value="css">CSS3</option>
					<option value="js">JavaScript</option>
					<option value="jq">jQuery</option>
				<select>
				<div class = "thr">
					<div></div>
					<div></div>
					<div></div>
				</div>
			</div>
		</div>
		<p><span>你想学：</span><span class = "info"></span></p>
	</div>
	<script>
		var sel=document.querySelector('#sel');
		var opts=document.querySelectorAll('option');
		var span=document.querySelector('.info');
		sel.onchange=function(){
			for (var i = 0; i < opts.length; i++) {
				if(opts[i].selected){
					// var a=opts.innerText;
					span.innerText=opts[i].innerText;
				}
			}
		}
		
	</script>	
</body>
</html>